<template>
  <el-container>
    <el-main>
      <template v-if="dialogFlag === 'add' || dialogFlag === 'edit'">
        <el-form ref="from" v-model="announcement">
          <el-form-item prop="title">
            <el-input v-model="announcement.title" maxlength="100" placeholder="标题" show-word-limit type="text"/>
          </el-form-item>
          <el-form-item prop="content">
            <el-input v-model="announcement.content" :autosize="{ minRows: 6 }"
                      maxlength="2000" minlength="10"
                      placeholder="内容" show-word-limit type="textarea"/>
          </el-form-item>
          <el-form-item class="text-right">
            <el-button type="primary" @click="editOrAdd()"> 确认</el-button>
            <el-button @click="closeDialog">取消
            </el-button>
          </el-form-item>
        </el-form>
      </template>
      <template v-else>
        <el-form :inline="true" :model="searchInfo">
          <el-form-item label="公告标题">
            <el-input v-model.trim="searchInfo.title" placeholder="搜索条件"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
            <el-button icon="refresh" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table ref="table" v-loading="loading" :data="tableData" border style="width: 100%" :header-cell-style="{
            'text-align': 'center' }">
          <el-table-column label="公告标题" prop="title" show-overflow-tooltip width="600"/>
          <el-table-column align="center" label="创建时间" prop="createTime"/>
          <el-table-column align="center" label="修改时间" prop="updateTime"/>
          <el-table-column align="center" label="操作" width="100px">
            <template #header>
              <el-button type="primary" @click="openAdd">新增</el-button>
            </template>
            <template #default="{ row }">
              <el-dropdown trigger="click" @command="(command)=> handleCommand(command, row)">
                <el-button type="primary" :icon="Operation" plain size="small"/>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="update" :icon="Edit">编辑</el-dropdown-item>
                    <el-dropdown-item command="delete" :icon="Delete">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <div class="gva-pagination">
          <el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]"
                         :total="total" layout="total, sizes, prev, pager, next, jumper"
                         :hide-on-single-page="pageSize===10"
                         @current-change="handleCurrentChange" @size-change="handleSizeChange"/>
        </div>
      </template>

    </el-main>
  </el-container>
</template>

<script setup>
import {ref} from 'vue'
import {ElMessage} from "element-plus";
import {delAnnouncements, editAnnouncements, getAnnouncements, saveAnnouncements} from "@/api/announcements";
import {Delete, Edit, Operation} from "@element-plus/icons-vue";
//data
const tableData = ref()
const announcement = ref({
  announcementId: '',
  title: '',
  content: '',
  createTime: '',
  updateTime: ''
})
const from = ref()
const loading = ref(true)
const dialogFlag = ref()
//page
const total = ref(0)
const page = ref(1)
const pageSize = ref(10)
const searchInfo = ref({
  title: ''
})

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getList()
}
const handleCurrentChange = (val) => {
  page.value = val
  getList()
}

//查询
const getList = async () => {
  loading.value = true
  const res = await getAnnouncements({page: page.value, pageSize: pageSize.value, ...searchInfo.value})
  if (res.code === 0) {
    tableData.value = res.data.records
    total.value = +res.data.total
    loading.value = false
  }
}
//删除
const deleteFunc = async (row) => {
  const res = await delAnnouncements(row.announcementId)
  if (res.code === 0) {
    ElMessage({type: 'success', message: res.msg})
  }
  row.visible = false
  await getList()
}
//修改
const openEdit = (row) => {
  announcement.value = JSON.parse(JSON.stringify(row))
  dialogFlag.value = 'edit'
}
//新增
const openAdd = () => {
  dialogFlag.value = 'add'
}

//新增或修改请求
const editOrAdd = async () => {
  let res
  const req = {...announcement.value}
  if (dialogFlag.value === 'add') {
    res = await saveAnnouncements(req)
  } else {
    res = await editAnnouncements(req)
  }
  if (res.code === 0) {
    ElMessage({type: 'success', message: res.msg})
    await closeDialog()
  }
}
//关闭模态框
const closeDialog = async () => {
  dialogFlag.value = ''
  initForm()
  await getList()
}
//初始化表单
const initForm = () => {
  if (from.value) {
    from.value.resetFields()
  }
  announcement.value = {
    announcementId: '',
    title: '',
    content: '',
    createTime: '',
    updateTime: ''
  }
}
const handleCommand = (command, row) => {
  switch (command) {
    case 'update':
      openEdit(row)
      break
    case 'delete':
      deleteFunc(row)
      break
  }
}

const onSubmit = () => {
  getList()
}
const onReset = () => {
  searchInfo.value = {}
}
getList()

</script>
<style scoped lang="scss">
pre {
  white-space: pre-wrap;
  /* 保留空白符序列，并正常进行换行 */
  white-space: -moz-pre-wrap;
  /* 兼容火狐浏览器 */
  //white-space: -webkit-pre-wrap;
  /* 兼容谷歌浏览器 */
  white-space: -o-pre-wrap;
  /* 兼容opera浏览器 */
  word-wrap: break-word;
  /* 允许字母、url地址换行 */
}
</style>
